<template>
  <div class="simple-file-upload-example">
    <div class="example-section">
      <h3 class="section-title">基础卡片上传</h3>
      <p class="section-description">默认尺寸 (120x120)，最简单的使用方式</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <SimpleFileUpload
            v-model="basicFile"
            button-text="选择文件"
            @success="handleSuccess"
            @error="handleError"
            @remove="handleRemove"
          />
        </div>
        <div class="result-display">
          <div class="result-label">当前值：</div>
          <div class="result-value">{{ basicFile || '未选择文件' }}</div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">头像上传</h3>
      <p class="section-description">适合头像上传的配置，限制图片类型和大小</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <SimpleFileUpload
            v-model="avatarFile"
            button-text="上传头像"
            accept=".jpg,.jpeg,.png"
            :allowed-types="['.jpg', '.jpeg', '.png']"
            :max-size="2"
            width="150px"
            height="150px"
            @success="handleSuccess"
            @error="handleError"
            @remove="handleRemove"
          />
        </div>
        <div class="result-display">
          <div class="result-label">当前值：</div>
          <div class="result-value">{{ avatarFile || '未选择头像' }}</div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">小尺寸组件</h3>
      <p class="section-description">适合图标上传的小尺寸组件 (80x80)</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <SimpleFileUpload
            v-model="iconFile"
            button-text="选择图标"
            width="80px"
            height="80px"
            accept=".png,.svg,.ico"
            :allowed-types="['.png', '.svg', '.ico']"
            :max-size="1"
            @success="handleSuccess"
            @error="handleError"
            @remove="handleRemove"
          />
        </div>
        <div class="result-display">
          <div class="result-label">当前值：</div>
          <div class="result-value">{{ iconFile || '未选择图标' }}</div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">证书文件上传</h3>
      <p class="section-description">支持证书文件格式，包含预览功能</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <SimpleFileUpload
            v-model="certFile"
            button-text="选择证书"
            accept=".p12,.pem,.crt,.cer"
            :allowed-types="['.p12', '.pem', '.crt', '.cer']"
            :max-size="5"
            :show-preview="true"
            @success="handleSuccess"
            @error="handleError"
            @remove="handleRemove"
            @preview="handlePreview"
          />
        </div>
        <div class="result-display">
          <div class="result-label">当前值：</div>
          <div class="result-value">{{ certFile || '未选择证书' }}</div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">禁用状态</h3>
      <p class="section-description">禁用文件上传功能</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <SimpleFileUpload
            v-model="disabledFile"
            button-text="已禁用"
            :disabled="true"
          />
        </div>
        <div class="result-display">
          <div class="result-label">状态：</div>
          <div class="result-value">
            <a-tag color="default">已禁用</a-tag>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">多尺寸组合展示</h3>
      <p class="section-description">展示多个不同尺寸的组件</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <div class="multiple-uploads">
            <div class="upload-group">
              <div class="upload-label">小图标 (60x60)</div>
              <SimpleFileUpload
                v-model="smallIcon"
                button-text="图标"
                width="60px"
                height="60px"
                @success="handleSuccess"
              />
            </div>
            <div class="upload-group">
              <div class="upload-label">中等尺寸 (100x100)</div>
              <SimpleFileUpload
                v-model="mediumFile"
                button-text="选择文件"
                width="100px"
                height="100px"
                @success="handleSuccess"
              />
            </div>
            <div class="upload-group">
              <div class="upload-label">大尺寸 (180x180)</div>
              <SimpleFileUpload
                v-model="largeFile"
                button-text="选择文件"
                width="180px"
                height="180px"
                @success="handleSuccess"
              />
            </div>
          </div>
        </div>
        <div class="result-display">
          <div class="result-label">组合状态：</div>
          <div class="result-value">
            <div class="status-grid">
              <div class="status-item">
                <span class="status-label">小图标：</span>
                <span class="status-value">{{ smallIcon || '未选择' }}</span>
              </div>
              <div class="status-item">
                <span class="status-label">中等尺寸：</span>
                <span class="status-value">{{ mediumFile || '未选择' }}</span>
              </div>
              <div class="status-item">
                <span class="status-label">大尺寸：</span>
                <span class="status-value">{{ largeFile || '未选择' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">组件代码示例</h3>
      <p class="section-description">简洁文件上传组件的使用方法</p>

      <a-collapse>
        <a-collapse-panel key="1" header="基础用法">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;SimpleFileUpload
    v-model="basicFile"
    button-text="选择文件"
    @success="handleSuccess"
    @error="handleError"
    @remove="handleRemove"
  /&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue'
import SimpleFileUpload from '@/components/SimpleFileUpload.vue'

const basicFile = ref('')

const handleSuccess = (response, file) =&gt; {
  console.log('上传成功:', response, file)
}

const handleError = (error, file) =&gt; {
  console.error('上传失败:', error, file)
}

const handleRemove = () =&gt; {
  console.log('文件已移除')
}
&lt;/script&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="2" header="头像上传">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;SimpleFileUpload
    v-model="avatarFile"
    button-text="上传头像"
    accept=".jpg,.jpeg,.png"
    :allowed-types="['.jpg', '.jpeg', '.png']"
    :max-size="2"
    width="150px"
    height="150px"
    @success="handleSuccess"
    @error="handleError"
    @remove="handleRemove"
  /&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="3" header="自定义尺寸">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;SimpleFileUpload
    v-model="iconFile"
    button-text="选择图标"
    width="80px"
    height="80px"
    accept=".png,.svg,.ico"
    :allowed-types="['.png', '.svg', '.ico']"
    :max-size="1"
    @success="handleSuccess"
    @error="handleError"
    @remove="handleRemove"
  /&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="4" header="证书文件上传">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;SimpleFileUpload
    v-model="certFile"
    button-text="选择证书"
    accept=".p12,.pem,.crt,.cer"
    :allowed-types="['.p12', '.pem', '.crt', '.cer']"
    :max-size="5"
    :show-preview="true"
    @success="handleSuccess"
    @error="handleError"
    @remove="handleRemove"
    @preview="handlePreview"
  /&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import SimpleFileUpload from '../../../components/SimpleFileUpload.vue'

// 各种示例的文件路径
const basicFile = ref<string>('')
const avatarFile = ref<string>('')
const iconFile = ref<string>('')
const certFile = ref<string>('')
const disabledFile = ref<string>('')
const smallIcon = ref<string>('')
const mediumFile = ref<string>('')
const largeFile = ref<string>('')

// 成功回调
const handleSuccess = (response: any, file: File) => {
  console.log('上传成功:', response, file)
  message.success(`文件 ${file.name} 上传成功`)
}

// 错误回调
const handleError = (error: any, file: File) => {
  console.error('上传失败:', error, file)
  message.error(`文件 ${file.name} 上传失败`)
}

// 移除回调
const handleRemove = () => {
  console.log('文件已移除')
  message.info('文件已移除')
}

// 预览回调
const handlePreview = (filePath: string) => {
  console.log('预览文件:', filePath)
  message.info(`预览文件: ${filePath}`)
}
</script>

<style scoped>
.simple-file-upload-example {
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.example-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.section-description {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.demo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-wrapper {
  padding: 20px;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.demo-wrapper:hover {
  border-color: #1890ff;
  background: #f0f8ff;
}

.result-display {
  padding: 16px;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.result-label {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  min-width: 80px;
}

.result-value {
  flex: 1;
  font-size: 14px;
  color: #595959;
  word-break: break-all;
}

/* 多个上传组件样式 */
.multiple-uploads {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.upload-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.upload-label {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  text-align: center;
}

.status-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  font-size: 13px;
}

.status-label {
  font-weight: 500;
  color: #262626;
  min-width: 80px;
}

.status-value {
  color: #595959;
  flex: 1;
}

/* 代码示例 */
.code-block {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #24292e;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .example-section {
    padding: 20px;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 18px;
  }

  .demo-container {
    gap: 16px;
  }

  .demo-wrapper {
    padding: 16px;
    min-height: 150px;
  }

  .multiple-uploads {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .result-display {
    flex-direction: column;
    gap: 8px;
  }

  .result-label {
    min-width: auto;
  }

  .status-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .status-label {
    min-width: auto;
  }
}
</style>